<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选、取消、反选</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>

    <div class="boy">
        <div class="container">
            <form action="">
                <div class="form-group text-center ">
                    <ul class="row  h2 title ">
                        <li class="col-md-4">你想一夜暴富吗</li>
                        <li class="col-md-4">你想一夜成名吗</li>
                        <li class="col-md-4">你想开兰博基尼吗</li>
                    </ul>
                    <ul class="row h3 content">
                        <li class="col-md-12">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" name="languages">有点想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" name="languages">非常想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >超级想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >梦里想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" name="languages">有点想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" name="languages">非常想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >超级想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >梦里想
                                    </label>
                                </div>
                                <div class="col-md-12 box">
                                    <label class="checkbox-inline h2">
                                        <input type="checkbox" value="option3" name="languages" >没有想
                                    </label>
                                </div>
                                <div class="col-ma-12">
                                    <div class="radio-inline button">
                                        <input type="button" value="全选" name="all">
                                    </div>
                                    <div class="radio-inline button">
                                        <input type="button" value="取消" name="cancel">
                                    </div>
                                    <div class="radio-inline button">
                                        <input type="button" value="反选" name="back">
                                    </div>
                                </div>
                                
                            </div>
                        </li>
                        <li class="col-md-12">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" name="languages">有点想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" name="languages">非常想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >超级想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >梦里想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" name="languages">有点想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" name="languages">非常想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >超级想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >梦里想
                                    </label>
                                </div>
                                <div class="col-md-12 box">
                                    <label class="checkbox-inline h2">
                                        <input type="checkbox" value="option3" name="languages" >并不想
                                    </label>
                                </div>
                                <div class="col-ma-12">
                                    <div class="radio-inline button">
                                        <input type="button" value="全选" name="all">
                                    </div>
                                    <div class="radio-inline button">
                                        <input type="button" value="取消" name="cancel">
                                    </div>
                                    <div class="radio-inline button">
                                        <input type="button" value="反选" name="back">
                                    </div>
                                </div>
                                
                            </div>
                        </li>
                        <li class="col-md-12">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" name="languages">有点想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" name="languages">非常想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >超级想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >梦里想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" name="languages">有点想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" name="languages">非常想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >超级想
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" name="languages" >梦里想
                                    </label>
                                </div>
                                <div class="col-md-12 box">
                                    <label class="checkbox-inline h2">
                                        <input type="checkbox" value="option3" name="languages" >懒得想
                                    </label>
                                </div>
                                <div class="col-ma-12">
                                    <div class="radio-inline button">
                                        <input type="button" value="全选" name="all">
                                    </div>
                                    <div class="radio-inline button">
                                        <input type="button" value="取消" name="cancel">
                                    </div>
                                    <div class="radio-inline button">
                                        <input type="button" value="反选" name="back">
                                    </div>
                                </div>
                                
                            </div>
                        </li>
                    </ul>
                    <div class="col-ma-12">
                        <button type="submit" class="btn btn-primary" name="sub">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>





<script src="./js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
<script>

$(function(){

    //初始化
    $(".title li").eq(0).addClass("title1");
    $(".content li").eq(0).addClass("content1")

    $(".title li").each(function(index){
        $(this).hover(function(){
            $(this).siblings().removeClass("title1");
            $(this).addClass("title1");
            $(".content li").eq(index).siblings().removeClass("content1")
            $(".content li").eq(index).addClass("content1")
        },function(){
            
        })
    })

    $(".button [name=all]").click(function(){
        
        var input = $(this).parent().parent().siblings().children().children()
        input.prop("checked",true);
    })
    $(".button [name=cancel]").click(function(){
        
        var input = $(this).parent().parent().siblings().children().children()
        input.prop("checked",false);
    })
    $(".button [name=back]").click(function(){

        var input = $(this).parent().parent().siblings().children().children()
        for(var i = 0; i <input.length; i++) {
            input.eq(i).prop("checked",!input.eq(i).prop("checked"));
        }
        
        
        
    })
    


})



</script>